<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: David
  Date: 2019/12/22
  Time: 21:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="js/base-loading.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
    <script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery_add_tab.js"></script>
    <script type="text/javascript" src="jquery/locale/easyui-lang-zh_CN.js"></script>
    <title>看板管理</title>
</head>
<body>

<div id="cc" class="easyui-layout" style="width:100%;height:500px">
    <div data-options="region:'center',title:'看板管理'" fit=true style="width: 100%;height: 100%;">
        <table id="dataGrid"></table>
    </div>
</div>
<div id="gridToolbar">
    <a href="javascript:;" onclick="showTable()" class="easyui-linkbutton" data-options="iconCls:'icon-more',plain:true">查看看板</a>
<%--    <a href="javascript:;" onclick="addPanel()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新建看板</a>
    <a href="javascript:;" onclick="removePanel()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除看板</a>
    <a href="javascript:;" onclick="addToMenu()" class="easyui-linkbutton" data-options="iconCls:'icon-manage',plain:true">添加到菜单</a>--%>
</div>

<!-- 添加面板 -->
<div id="dataDialog" class="easyui-dialog" title="添加" style="width:400px;height:auto;" data-options="modal:true,closed:true,toolbar:'#dataDialogToobar'">
    <form id="dataForm" style="width:100%;margin: 40px 0;" generate="false">
        <table id="dataTable" style="text-align: right">
            <tbody>
                <tr>
                    <td>
                        看板名称：<input id="panelName" name="panelName" class="easyui-validatebox" data-options="required:true,validType:['length[0,20]']"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<div id="dataDialogToobar">
    <a href="javascript:;" id="saveButton" class="easyui-linkbutton" onclick="saveData()"
       data-options="iconCls:'icon-save'">保存</a>
</div>

<input id="saveValue" value="" style="display: none"/>

<div class="easyui-dialog" id="tableDig" closed=true modal=true style="height: 450px; width: 600px;"
     title="面板详情" data-options="toolbar:'#deleteTool',modal:true,closed:true" >
    <table class="easyui-datagrid" id="tableGrid"
           data-options="fit:true,singleSelect:true,rownumbers:true,url:'${serverUrl}/panel/table',method:'GET'"
           fitColumns="true" style="height: 100%">
        <thead>
        <tr>
            <%--<th data-options="field:'tableName', width:100, align:'center',hide:true"></th>--%>
            <th data-options="field:'tableId', width:100, align:'center', hidden:'true' ">数据表id</th>
            <th data-options="field:'tableComment', width:100, align:'center'">数据表名称</th>
        </tr>
        </thead>
    </table>
</div>

<div id="menuDialog" class="easyui-dialog" title='添加' data-options="toolbar:'#diglogTools',modal:true,closed:true" style="height:200px;width:750px;">
    <form id="editForm" method="post">
        <table style="text-align: right;margin: 20px">
            <tr>
                <td style="width: 300px;">
                    <label>页面名称:</label>
                    <input class="easyui-validatebox" id="viewName" name="viewName" style="height:20px;"
                           data-options="required:true">
                </td>
                <td style="width: 300px;">
                    <label>所属系统:</label>
                    <input id="subject" class="easyui-combobox" type="text" name="subject" style="height:20px;"/>
                </td>
            </tr>
            <tr>
                <td style="width: 300px;">
                    <label>所属菜单:</label>
                    <input id="resource" class="easyui-combobox" type="text" name="resource" style="height:20px;" data-options="
                            valueField: 'id',
                            textField: 'name',
                            required:true,
                            editable: false
                            "/>
                </td>
                <input id="tableSerial" class="easyui-validatebox" type="hidden" name="tableSerial" style="height:20px;"/>
                <input id="url" class="easyui-validatebox" type="hidden" name="url" style="height:20px;"/>
            </tr>
        </table>
    </form>
</div>
<div id="diglogTools">
    <a href="javascript:;" onclick="saveMenu()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
</div>

<%--<div id="deleteTool">
    <a href="javascript:;" onclick="deleteTableFromPanel()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>--%>



<script type="text/javascript">
    /**
     * 解决丢它老母的IE缓存问题
     */
    jQuery(function($) {
        jQuery.ajaxSetup({
            cache : false
        });
    });
    $(function() {
        //数据表管理 dataGrid
        $('#dataGrid').datagrid({
            columns:[[
                {field:'id',title:'id',width:100,hidden:true},
                {field:'panelName',title:'看板名称',width:300,align:'center'},
                {field:'createDate',title:'创建日期',width:200,align:'center'},
                {field:'createTime',title:'创建时间',width:200,align:'center'},
                {field:'createUser',title:'创建用户',width:300,align:'center'}
            ]],
            fit: true,
            url: '${serverUrl}/panel',
            method: "GET",
            toolbar: "#gridToolbar",
            singleSelect: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [10,20,30]
        });
    })


    /**
     * 添加按钮
     */
    function addPanel() {
        $("#dataForm").form('clear');
        $("#dataDialog").dialog({'title': '添加'});
        $("#dataDialog").dialog('open');
    }

    /**
     * 保存面板
     * @param mdoel
     */
    function saveData() {
        if ($("#dataForm").form('validate')) {
            var formData = $("#dataForm").serializeArray();
            //获取面板名称
            var panelName = $("#panelName").val();

            var data = {
                "data": panelName,
                "loginId": '${loginId}'
            }
            console.log(JSON.stringify(data));
            $.ajax({
                url: '${serverUrl}/panel',
                type: 'POST',
                dataType: 'JSON',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (res) {
                    if (res.code == "000000") {
                        $.messager.alert('提示', "处理成功", "info");
                    } else {
                        $.messager.alert('提示', res.msg, "error");
                    }
                    $("#dataDialog").dialog('close');
                    $('#dataGrid').datagrid('reload');
                },
                error: function (error) {
                    $.messager.alert('提示', "处理失败", "error");
                }
            })
        }
    }

    function deleteTableFromPanel(){
        let rows = $("#tableGrid").datagrid("getSelections");
        if (rows.length != 1){
            $.messager.alert('提示','请选择一条数据进行操作!','info');
            return;
        }
        let tableId = rows[0].tableId;
        let panelId = $("#saveValue").val();
        let url = '${serverUrl}/panel/deleteTableFromPanel';
        $.messager.progress({
           title:'请稍等',
           msg:'正在删除表...'
        });
        $.ajax({
            type:'POST',
            url: url,
            data:{'tableId':tableId, 'panelId':panelId },
            async:true,
            dataType:'json',
            success:function (result){
                $.messager.progress('close');
                if (result == "0"){
                    $.messager.alert('提示','删除成功!','info');
                    $("#tableGrid").datagrid("reload");
                }
                if (result == "1"){
                    $.messager.alert('提示','删除失败!','error');
                }
            },
            error:function (e){
                $.messager.progress('close');
                $.messager.alert('提示','系统错误!','error');
            }
        });
    }

    function showTable() {
        var rows = $("#dataGrid").datagrid("getSelections");
        if (rows.length != 1) {
            $.messager.alert('提示', '请选择一行数据进行操作!', 'info');
            return;
        }
        $("#saveValue").val(rows[0].id);
        console.log(rows[0]);
        //打开表结构窗体
        $("#tableDig").dialog('open');
        $('#tableGrid').datagrid({
            queryParams: {
                panelId: rows[0].id
            }
        });
    }

    function removePanel() {
        var rows = $("#dataGrid").datagrid("getSelections");
        if (rows.length != 1) {
            $.messager.alert('提示', '请选择一行数据进行操作!');
            return;
        }
        $.messager.confirm('确认', '您确认要删除面板吗?', function (r) {
            if (r) {
                var panelId = rows[0].id;
                var data = {
                    "data": panelId,
                    "logindId": "admin"
                }
                //调用drop接口
                $.ajax({
                    type: "DELETE",
                    url: "${serverUrl}/panel",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (res) {
                        if (res.code == '000000') {
                            $.ajax({
                                type: "POST",
                                url: 'deleteRule',
                                data: {'panelId':panelId},
                                async: true,
                                dataType: 'json',
                                success: function (result) {
                                    if (result == "1"){
                                        $.messager.alert("提示", "处理成功!", "info");
                                    }
                                    if (result == "0"){
                                        $.messager.alert("提示","删除权限失败!","error");
                                    }
                                },
                                error: function () {
                                    $.messager.alert("提示", "系统错误!", "error");
                                }
                            });
                        } else {
                            $.messager.alert("提示", res.msg, "info");
                        }
                        $("#dataGrid").datagrid("reload");
                    },
                    error: function (err) {
                        $.messager.alert("提示", "处理失败!", "info");
                    }
                })
            }
        });
    }

    /**
     * 添加到菜单
     */
    function addToMenu() {
        var rows = $("#dataGrid").datagrid("getSelections");
        if (rows.length != 1) {
            $.messager.alert('提示', '请选择一行数据进行操作!', "info");
            return;
        }
        var panelId = rows[0].id;
        //加载系统数据和菜单数据
        $.ajax({
            type: "POST",
            url: "getAllSys_Auth_Role",
            contentType: "application/json",
            dataType: "json",
            async: true,
            success: function (res) {
                if (res) {
                    $("#subject").combobox('clear');
                    $("#subject").combobox('loadData', res.rows);
                    $("#resource").combobox('clear');
                    $("#resource").combobox('loadData',res.menus)
                }
            },
            error: function (err) {
                $.messager.alert('提示', "处理失败!", "info");
            }
        })
        $("#tableSerial").val(panelId);
        $("#url").val("dataCount?panelId=" + panelId);
        $("#menuDialog").dialog('open');
    }

    function saveMenu() {
        if ($("#editForm").form('validate')) {
            $('#editForm').form('submit', {
                url: 'addMenu',
                success: function(res){
                    res = JSON.parse(res);
                    if (res.code = '000000') {
                        //更新菜单ID
                        $.ajax({
                            type: "PUT",
                            url: "${serverUrl}/panel",
                            dataType: "json",
                            contentType: "application/json",
                            async: true,
                            data: JSON.stringify({
                                "data": {
                                    id: $("#tableSerial").val(),
                                    menuId: res.menuId
                                },
                                "loginId": '${loginId}'
                            }),
                            success: function (res) {
                                if (res.code == '000000') {
                                    $.messager.alert("提示", "处理成功,请前往角色管理页面分配权限!", "info");
                                } else {
                                    $.messager.alert("提示", res.msg, "info");
                                }
                                $("#dataGrid").datagrid("reload");
                            },
                            error: function (err) {
                                $.messager.alert('提示', "处理失败!", "info");
                            }
                        })
                    } else {
                        $.messager.alert("提示", res.msg, "info");
                    }
                    $("#menuDialog").dialog('close');
                }
            });
        }
    }

    $("#subject").combobox({
        valueField: 'id',
        textField: 'subjectName',
        editable: false,
        required:true,
        onSelect: function (res) {
            var subjectId = res.id;
            $.ajax({
                type: "POST",
                url: "getSys_Menu?subjectId=" + subjectId,
                contentType: "application/json",
                dataType: "json",
                success: function (res) {
                    if (res) {
                        var menulist = res.menulist;
                        var newList = [];
                        for (var i = 0; i < menulist.length; i++) {
                            var menu = menulist[i];
                            if (menu.name == '数据补录') {
                                newList.push(menu);
                            }
                        }
                        $("#resource").combobox('clear');
                        $("#resource").combobox('loadData', newList);
                    }
                },
                error: function (err) {
                    $.messager.alert("提示", "处理失败!", "info");
                }
            })
        }
    })


</script>
</body>
</html>
